<template>
  <el-dialog
    append-to-body
    v-bind="$attrs"
    :title="$t('flyparam.task_center')"
    width="1140px"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-card
       
      shadow="never"
      style="border: 0px"
      :body-style="{ padding: '0px' }"
      :page-size="pageSize"
      :total="rows"
      :current-page="pageNo"
      @current-change="currentChangeHandle"
    >
      <el-table :data="data" v-loading="dataListLoading">
        <el-table-column
          prop="taskTitle"
          :label="$t('flyparam.task_title')"
          min-width="250px"
        />
        <el-table-column
          prop="creTime"
          :label="$t('flyparam.task_cretime')"
          align="center"
          width="120px"
        >
          <template v-slot="scope">
            <div :title="timeFilter(scope.row.creTime)">
              {{ dateFilter( scope.row.creTime ) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="processCount"
          :label="$t('flyparam.task_process')"
          align="center"
          width="200px"
        >
          <template v-slot="scope">
            <span>
              {{ scope.row.processCount }} / {{ scope.row.taskDetailCount }}
            </span>
            <el-progress
              :percentage="
                (
                  (scope.row.processCount * 100) /
                  scope.row.taskDetailCount
                ).toFixed(0)
              "
              :show-text="false"
            ></el-progress>
          </template>
        </el-table-column>
        <el-table-column
          prop="successCount"
          :label="$t('flyparam.successCount')"
          min-width="100px"
        />
        <el-table-column
          prop="failCount"
          :label="$t('flyparam.failCount')"
          min-width="80px"
        />
        <el-table-column
          prop="status"
          :label="$t('flyparam.task_status')"
          width="120px"
        >
          <template v-slot="scope">
            <el-tag :type="getStatusClass(scope.row.status)">{{
              getStatuslabel(scope.row.status)
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="downloadUrl"
          :label="$t('flyparam.task_download')"
          width="100px"
          align="center"
        >
          <template v-slot="scope">
            <el-button
              v-show="scope.row.downloadUrl"
              :loading="scope.$index === downloadRow"
              type="primary"
              size="small"
              icon="el-icon-download"
              @click="download(scope.row, scope.$index)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </el-dialog>
</template>

<script>
import { getTask } from '@/api/parameter'
import { dateFilter, timeFilter } from '@/filters'

export default {
  name: 'TaskDownload',
  data() {
    return {
      data: [],
      dataListLoading: false,
      downloadRow: null,
      pageNo: 1,
      pageSize: 10,
      rows: 0
    }
  },
  mounted() {},
  methods: {
    dateFilter,
    timeFilter,
    getStatusClass(status) {
      if (status === 9 || status === 7 || status === 5) {
        return 'warning'
      } else if (status === 0) {
        return 'info'
      } else if (status === 1) {
        return 'success'
      } else {
        return 'danger'
      }
    },
    getStatuslabel(status) {
      if (status === 9 || status === 7 || status === 5) {
        return this.$t('flyparam.task_processing')
      } else if (status === 0) {
        return this.$t('flyparam.task_cancel')
      } else if (status === 1) {
        return this.$t('flyparam.task_success')
      } else {
        return this.$t('flyparam.task_fail')
      }
    },
    getTask() {
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      this.dataListLoading = true
      getTask(params)
        .then((res) => {
          this.rows = res.rows
          this.data = res.data
          this.dataListLoading = false
        })
        .catch((err) => {
          this.dataListLoading = false
          this.$confirmError(err)
        })
    },
    currentChangeHandle(val) {
      this.pageNo = val
      this.getTask()
    },
    download(row, index) {
      this.downloadRow = index
      setTimeout(() => {
        this.downloadRow = null
      }, 1000)
      var a = document.createElement('a')
      a.href = row.downloadUrl
      a.download = row.taskTitle
      a.click()
    },
    handleOpen() {
      this.getTask()
    },
    handleClose() {
      this.downloadRow = null
      this.$emit('update:model-value', false)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog .el-dialog__body {
  padding: 0;
}
</style>
